<script setup lang='ts'>
import queryIDStore from "@/store/queryIDStore";
import userStore from "@/store/userStore"
import  utils from "@/utils/index"
import { nextTick, ref } from "vue";
const show=ref(false)
const activeName = ref("site");

const userInfo=ref()

userInfo.value=userStore().info
nextTick(()=>{
    document.documentElement.addEventListener("click",()=>{
        show.value=false  //还要阻止点击事件的冒泡
    })
})


//存储访问的uid
const storeUserIid=(u_id:any)=>{
    queryIDStore().setQueryUid(u_id)
    sessionStorage.setItem("userinfo_flash","userinfo_flash")
}
const dialog = ref(false)
</script>
<template>

     <div class=" w-full md:w-screen   h-auto flex justify-between  items-center  ">
          <div class="  text-center  flex justify-center items-center  ">
            <h1 class="font-extrabold leading-11 text-[30px] text-red-700">
                <router-link :to="{name:'home'}">
                  🌈 学易网
                </router-link>
            </h1>
   
          </div>
     <div class="   md:mr-20 flex justify-center items-center">
       <!-- TODO 写站类消息 -->
      <div class=" mr-5 md:mr-12 mt-2 notification">
        <icon-remind theme="outline" size="24" fill="#6a1990" @click.stop="show=!show"/>
        <el-tabs v-model="activeName" class="lists" v-show="show" @click.stop>
      <el-tab-pane label="系统消息" name="site" >
    
         <p>无消息</p>

      </el-tab-pane>
      <el-tab-pane label="站内通知" name="message">
           <p>无消息</p>
      </el-tab-pane>
    </el-tabs>
      </div>
          <el-dropdown class="!w-auto">
          <img :src="userInfo?.avatar" 
            class="  mr-10 md:mr-0    w-9 h-9 object-cover
    rounded-full">
        
<template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item >
         <icon-home theme="outline" size="24" fill="rgb(139 92 246)" class=" mr-2 text-xl"/>
          <router-link :to="{name:'home'}">网站首页</router-link>
          </el-dropdown-item>
        <el-dropdown-item>
     
                 <icon-people-safe theme="outline" size="24" fill="rgb(139 92 246)" class=" mr-2 text-xl"/>
                 <!-- "`/blogger/content/selfInfo/post?u_id=${userInfo.id}`" -->
                      <router-link @click="storeUserIid(userInfo?.id)"
                       :to="`/blogger/content/selfInfo/post?u_id=${userInfo?.id}`">个人主页 </router-link>

          </el-dropdown-item>

        <el-dropdown-item>
                 <icon-file-code theme="outline" size="24" fill="rgb(139 92 246)" class=" mr-2 text-xl"/>文档资料
          </el-dropdown-item>

          
          <el-dropdown-item   @click="dialog = true">
            <icon-avatar theme="outline" size="24" fill="#f15215" class=" mr-2 text-xl"/>
                 更换头像
          </el-dropdown-item>


        <el-dropdown-item divided  @click="utils.user.logout()">
                          <icon-logout theme="outline" size="24" fill="#19e7a6" class=" mr-2 text-xl"/>
            退出登录
          </el-dropdown-item>
      </el-dropdown-menu>
    </template>
   </el-dropdown>
   <p class="ml-2 text-sm mt-2">{{userInfo?.name}}</p>
     </div>
     </div>
     <el-drawer
    ref="drawerRef"
    v-model="dialog"
    :with-header="false"
    
    direction="rtl"
    custom-class="demo-drawer"
  >
  </el-drawer>
</template>
<style scoped lang='scss'>
    
    @media screen and (max-width:768px) {
        
 }

 .notification {
  @apply relative ;
  .lists {
    @apply absolute bg-white p-3 border rounded-md 
      shadow-md right-[-60px] z-20 w-[200px] text-sm;
      a{
        @apply  truncate  block  hover:text-fuchsia-700
      }
    
  }
}
</style>